<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8"/>
    <title>地图现势资料管理系统</title>
    <meta name="keywords" content="${node.keywords}"/>
    <meta name="description" content="${node.description}"/>
    <link th:href="@{/_files/global.css}" rel="stylesheet"/>
    <link th:href="@{/_files/style.css}" rel="stylesheet"/>
    <link th:href="@{/_files/mystyle.css}" rel="stylesheet"/>
    <link th:href="@{/ajax/libs/select/select2.css}" rel="stylesheet"/>
    <!--<script type="text/javascript" th:src="@{/My97DatePicker/cn_WdatePicker.js}"></script>-->
    <script th:src="@{/_files/jquery.js}"></script>
    <script th:src="@{/_files/layer/layer.js}"></script>
    <script th:src="@{/_files/handlebars-v4.1.2.js}"></script>
    <script th:src="@{/_files/front.js}"></script>
    <script type="text/javascript" th:src="@{/_files/laydate/laydate.js}"></script>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <script th:src="@{/js/jqPaginator.js}"></script>
    <script th:src="@{/ajax/libs/select/select2.js}"></script>

    <link th:href="@{/jquerypage/css/zxf_page.css}" rel="stylesheet">
    <script th:src="@{/jquerypage/js/zxf_page.js}"></script>
    <script th:src="@{/js/vector.js}"></script>


    <style>
        .s-result {
            font-family: "Microsoft YaHei";
        }

        .s-result li {
            margin-top: 8px;
        }

        .sr-title {
            margin: 0;
        }

        .sr-desc {
            margin-top: 3px;
            font-size: 14px;
            width: 90%;
        }

        .sr-footer {
            margin-top: 3px;
        }

        em.term {
            font-style: normal;
            color: #c00;
        }

        a.sa {
            color: #00c;
            text-decoration: underline;
            font-size: 16px;
            font-family: "Microsoft YaHei";
        }

        .sf-param {
            margin-top: 10px;
        }

        .search-input {
            height: 34px;
        }

        .time {
            padding: 16px;
        }

        .time input {
            height: 34px;
        }

        .row span {
            display: block;
        }

        .row b {
            font-weight: normal;
            color: #666;
        }

        .content {
            width: 96%;
            overflow: hidden;
            padding-left: 2%;
            padding-right: 2%;
        }

        .c-container a {
            font-style: normal !important;
            font-family: normal;
            text-decoration: none;
        }

        .c-container .time {
            display: block;
            float: right;
            color: #888;
        }

        .c-container .rows span {
            display: block;
            margin: 4px 0px;
        }

        .c-container .title a {
            font-size: 16px;
        }

        .c-container .fast-cut a {
            color: #e4393c;
        }

        .c-container .text {
            text-indent: 2em;
        }

        .item:hover, .fs1:hover, .nava:hover {
            background-color: #09448c !important;
        }
        #search{
            width:86px;
            height:34px;
            background:#09448c;
            color:#fff;
            border:0;
            font-size: 14px;
        }

        .tag-div {
            margin-left: -8px;
            width: 266px;
            float: left;
        }
        /*新增*/
        .w{
            width: 1170px!important;
            background: #fff;
        }
        .ws {
            width: 100% !important;
            text-align: center;
            background-color: #dfe5f1;
            padding: 20px 0;

        }
        .center1 {
            margin-right: auto;
            margin-left: auto;
        }
        #search{
            -webkit-border-radius: 0 8px 8px 0;
            -moz-border-radius: 0 8px 8px 0;
            border-radius: 0 8px 8px 0;
            margin-left: -5px;
            vertical-align: middle;
            width: 116px;
            height: 38px;
            background: #09448c;
            color: #fff;
            border: 0;
            font-size: 14px;
        }
        .search-input {
            -webkit-border-radius: 8px 0 0 8px;
            -moz-border-radius: 8px 0 0 8px;
            border-radius: 8px 0 0 8px;
            vertical-align: middle;
            width: 780px;
            height: 38px;
        }
        #beginDate{
            border: 1px solid #dddddd;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            padding: 2px 4px;
            height: 27px;
            margin-left: 10px;

        }
        #endDate{
            border: 1px solid #dddddd;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            padding: 2px 4px;
            height: 27px;
            margin-left: 10px;
        }

        .count .nums{
            color: #46b1ff;
            font-weight: bold;
        }
        .pagination>.active>a {
            background-color: #46b1ff;
            color: #ffffff;
            border: none;
            border: 1px solid #ddd;
        }
        .c-container .title a  {
            color: #00c;
            text-decoration: underline;
            font-size: 16px;
            font-family: "Microsoft YaHei";
        }
        .bg{
            background-color: #f2f2f2;
        }
        .wz{
            width: 1170px!important;
        }
        .paddings{
            padding: 20px;
        }
        .pt20{
            padding-top: 20px;
        }
        .pb20{
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
<div class=" center mt10 oh" style="background-color:#0a8cd2;width:100%!important;">
    <div id="top-header" class="w center1" style="background: transparent">
        <a class="block"
           style="width:100%;height:90px;background:url(../../../_files/img/logo.png) no-repeat ;background-size: 400px 160px;background-position:left center"
           th:href="@{/front}"></a>
    </div>
    <div class=" ws ">
        <div class="s-form center1" style="margin:125px 0 0 10px;">
            <div class="oh wz center1">
                <input type="text" name="key" value="" class="left search-input" style="width:780px;margin-left: 150px;"
                       autocomplete="off"/>
                <button id="search" class="left">搜索</button>
                <input type="text" name="deptId" th:value="${deptId}" hidden>
            </div>

            <div class="time">
                <div class="tag-div">
                    <input id="tags" type="hidden" name="tags">
                    <div class="tag-div">
                        <select id="sel_menu3" name="" class="form-control select2-hidden-accessible"
                                multiple="multiple">
                        </select>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="bg pt20 pb20">
    <div class="w center  paddings">
        <div class="c-666 count" style="height:44px;line-height:44px;background-color:#f9f9f9;padding:0 5px;">共0条数据
        </div>

        <div class="content"></div>

        <div class="center " style="text-align: center">
            <ul class="pagination" id="pagination1"></ul>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>

<div class="w center text-center c-666" style="padding:20px;">
    <div class="copyright">
        <span>山东省地图院 版权所有</span>
    </div>
</div>
<!--<div id="container"><div id="output"></div></div>-->

<!--style="width:184px;[#if (info_index)%5 != 0]margin-left:20px;[/#if]"-->
<script type="text/template" id="myTemplate">
    {{#each rows}}
    <div class="c-container">
        <h3 class="title">
            <a href="/system/zhengqu/infoFront/{{zqId}}" target="_blank">{{zqTitle}}</a>
        </h3>
        <div class="rows">
            <span><b>分类：</b>{{class1}} - {{class2}} - {{class3}}</span>
        </div>

        <div>
            <span class="text">{{{getSimpleText sxDetails}}}</span>
            <span class="time">创建时间：{{createTime}}</span>
        </div>

        <!--<div class="fast-cut">
            {{{fastCapture fFile}}}
        </div>-->
    </div>
    {{/each}}
</script>

<script th:inline="javascript">

    var ctx = [[@{/}]];
        var first = true;
        var list = ctx + 'front/list';
        var keyWords = [[${keyWords}]];
        var deptId = [[${deptId}]];
        $('.search-input').val(keyWords);

        //墨绿主题
    laydate.render({
        elem: '#endDate'
        , theme: '#09448c'
    });
    laydate.render({
        elem: '#beginDate'
        ,theme: '#09448c'
    });

    $(function () {

        getList(1,$('.search-input').val());

       /* initSelect();*/
    });

    $('#search').click(function () {
        getList(1,$('.search-input').val());
    });
    function fillInfo(data) {

        var tpl = $("#myTemplate").html();
        var template = Handlebars.compile(tpl);
        var html = template(data);

        $('.content').html(html);
    }


        function getList(pageNum,search) {
            $.ajax({
                url: list,
                data: {
                    orderByColumn:'create_time',
                    isAsc:'desc',
                    deptId: deptId,
                    pageNum: pageNum,
                    pageSize: 10,
                    keyWords: search,
                    beginDate:$('#beginDate').val(),
                    endDate:$('#endDate').val(),
                    tags:$('#tags').val()

                },
                cache: false,
                dataType: 'json',
                type: 'POST',
                success: function (result) {
                    if (result.code == 0) {
                        console.log(result)
                        if (result.dataType == 2) {
                            fillBook(result)
                        } else {
                            fillInfo(result);
                        }

                        $('.count').html('共条<span class="nums"> ' + result.total + ' </span>数据');

                        var pages = parseInt(result.total / 10) + 1;

                        if (first) {
                            first = false;
                            $("#pagination1").createPage({
                                pageNum: pages,
                                current: pageNum,
                                backfun: function (e) {
                                    console.log(e);//回调
                                    pageNum = e.current;
                                    getList(pageNum, $('#search-input').val());
                                }
                            });
                        }

                    } else {
                        layer.msg(result.msg);
                    }
                }
            });
        }


        function initSelect() {
            $.ajax({
                type: 'POST',
                url: ctx + "system/cmsInfoTags/list?has=1",
                data: {
                    pageSize: 1000,
                    pageNum: 1,
                    orderByColumn:'tagId',
                    isAsc: 'desc'
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code == 0) {
                        var str = "";
                        data.rows.forEach(function (obj, index, array) {
                            str += "<option value ='" + obj.infoIds+','+obj.tagId + "a'>" + obj.tag + "</option>"
                        })
                        $("#sel_menu3").html(str)
                        $("#sel_menu3").select2({
                            placeholder: "请输入标签",
                            language: "zh-CN",// 指定语言为中文，国际化才起效
                            allowClear: true,
                        });


                        $("#sel_menu3").on("change", function (e) {
                            setTags($("#sel_menu3").val());
                        })

                    }
                }
            })
        };

        function setTags(arr) {
            if (arr) {
                $('#tags').val(arr.join(','))
            } else {
                $('#tags').val('')
            }
        }
    var victor = new Victor("container", "output");


</script>

</body>
</html>

